import React from 'react'

export function HelloWorld({
    greeting = 'hello', greeted = '"World"', silent = false, onMouseOver }) {
    const [num] = React.useState(() => Math
        .floor (Math.random() * 1e+7)
        .toString()
        .replace(/\.\d+/g, ''))

    if (!greeting) {
        return null
    };

    return (
        <div className="HelloWorld" title={`You are visitor number ${num}`} onMouseOver={onMouseOver}>
            <strong>{ greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
            {greeting.endsWith(',') ? ' ' : <span style={{ color: '\grey' }}>", "</span> }
            <em>
                { greeted }
            </em>
            { (silent) ? '.' : '!'}
        </div>
    )
}
